<template>
	<div>
		<!-- 操作成功时返回 -->
        <van-dialog v-model="show" :show-cancel-button="false" :show-confirm-button="false">
            <div class="mydialog">
                <img src="~@/assets/img/success.png" alt="">
                <div class="mydialog-title">操作成功</div>
                <div class="mydialog-tipinfo">
                    {{title}}操作成功，请点击确认按钮返回。
                </div>
               <van-button class="confirmbtn" round block type="primary" @click="handleConfirm">确认</van-button>
            </div>
        </van-dialog>
	</div>
</template>
<script>
import { Button, Dialog } from 'vant'
    export default {
    	props: {
    		value: {
    			type: Boolean,
    			default: false
    		},
            title: {
                type: String
            }
    	},
        components: {
            [Button.name]: Button,
            [Dialog.Component.name]: Dialog.Component
        },
		computed: {
			show: {
				get() {
					return this.value
				},
				set(val) {
					return val
				}
			}
		},
		methods: {
            handleConfirm() {
                this.$emit('change', false)
                this.$emit('ok')
            }
		},
        model: {
        	prop: 'value',
      		event: 'change'
        }
	}
</script>
<style lang="less" scoped>
.mydialog {
    padding: 20px 20px 25px 20px;
    text-align: center;
    .mydialog-title {
        color: #2873E7;
        font-weight: bold;
        padding: 20px 0;
    }
    .mydialog-tipinfo {
        padding-bottom: 20px;
    }
    .confirmbtn {
        height: 46px;
        border-radius: 6px;
        border-color: #2873E7;
        background: linear-gradient(270deg, #268BEF 0%, #2972E7 105.08%);
        box-shadow: 0px 9px 15px rgba(40, 114, 230, 0.3);
    }
}
</style>